<template>
  <div>
    <TheHeader/>
    <TheScientificResearch/>
    <div class="dashboard-grid"> 
      <TheCourseTeaching/> 
      <TeacherRank/>
    </div> 
  </div> 
</template>
<script>
import TheHeader from './components/TheHeader.vue';
import TheScientificResearch from './components/TheScientificResearch.vue'; 
import TheCourseTeaching from './components/TheCourseTeaching.vue';
import TeacherRank from './components/TeacherRank.vue'; 
export default {
  components: { 
    TheHeader, 
    TheScientificResearch, 
    TheCourseTeaching,
    TeacherRank
  }
}
</script>
<style scoped> 
.dashboard-grid {
  margin: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

</style>